import { Tag } from "ant-design-vue";
const { CheckableTag } = Tag;

export default {
  name: "TagSelectOption",
  props: {
    prefixCls: {
      type: String,
      default: "ant-pro-tag-select-option"
    },
    value: {
      type: [String, Number, Object],
      default: ""
    },
    checked: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      localChecked: this.checked || false
    };
  },
  watch: {
    checked(val) {
      this.localChecked = val;
    },
    "$parent.items": {
      handler: function(val) {
        // this.value &&
        //   val.hasOwnProperty(this.value) &&
        //   (this.localChecked = val[this.value]);
        this.value &&
          Object.prototype.hasOwnProperty.call(val, this.value) &&
          (this.localChecked = val[this.value]);
      },
      deep: true
    }
  },
  render() {
    const { $slots, value } = this;
    const onChange = checked => {
      this.$emit("change", { value, checked });
    };
    return (
      <CheckableTag key={value} vModel={this.localChecked} onChange={onChange}>
        {$slots.default}
      </CheckableTag>
    );
  }
};
